import React, { Component } from 'react'
import { Menu ,Switch} from 'antd'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'
import './Sidemenu.css'
import 'antd/dist/antd.css'
import hotel from './Data'


const { SubMenu } = Menu;

export default class Navigation extends Component {
    constructor(props) {
        super(props)

        this.state = {

        }
    }
    state = {
        theme: 'dark',
        current: '1',
      };
    
    changeTheme = value => {
        this.setState({
          theme: value ? 'dark' : 'light',
        });
      };
    _handleClick = item => {
        this.props.handleClick(item)
    }
    render() {
        return (

            <div id="sidemenu">
                
                <Switch
                    checked={this.state.theme === 'dark'}
                    onChange={this.changeTheme}
                    checkedChildren="Dark"
                    unCheckedChildren="Light"
                />
                <Menu
                    theme={this.state.theme}
                    style={{ width: 256 }}
                    defaultOpenKeys={['sub1', 'sub2', 'sub3']}
                    mode="inline"
                >
                    {this.props.hotels.map(hotel => {
                        return <SubMenu key={"sub" + hotel.id} title={hotel.name}>
                            {hotel.items.map(item => {
                                return <Menu.Item onClick={() => this._handleClick(item)} key={item.id}>{item.name}</Menu.Item>
                            })
                            }
                        </SubMenu>
                    })}


                </Menu>
                <p id="tixinga">注：订房要趁早！</p>
                
            </div>
        )
    }
}
